iT邦幫忙

2023 iThome 鐵人賽

DAY 10
0
WordPress

從 0 到 100:WordPress 開發者的實戰手冊系列 第 10

Day 10 - 佈景主題設計實戰 (2) 特色功能定義

  • 分享至 

  • xImage
  •  

在佈景主題的檔案架構中,functions.php 這個檔案是定義擴充功能的入口,主要的作用是啟用佈景主題的特色支援功能,和載入自定項目選單所需要的類別和函式檔案。

函式:add_theme_support

WordPress 有一個很重要的函式,add_theme_support,它出現在每一個傳統佈景主題中,它的使用方法很簡單,第一個參數為功能的設定名稱,第二個參數為陣列,即為該功能的細節參數。

以下舉幾個範例:

add_theme_support( 'title-tag' );

沒有寫死 HTML 的 title 標籤在佈景主題的 header.php 的話,啟用這個功能,WordPress 會自動插入。

add_theme_support( 'custom-logo', array(
    'height' => 80,
    'width'  => 200,
) );

提供上傳網站 Logo 的功能。

傳統功能

以下是目前支援的功能。

設定值 功能說明
admin-bar 管理員工具欄,預設啟用。
automatic-feed-links 自動產生 RSS feed 連結資訊。
custom-background 自定義背景。
custom-header 自定義頁首。
custom-line-height 自定義行高。
custom-logo 自定義網站 Logo。
customize-selective-refresh-widgets 部分刷新小工具。
custom-spacing 自定義間距。
custom-units 自定義單位。
dark-editor-style 暗色編輯器風格。
featured-content 特色內容。
html5 HTML5 標籤支援。
menus 選單,預設啟用。
post-formats 文章格式。
post-thumbnails 文章縮圖。
starter-content 初始內容。
title-tag 標題標籤。
widgets 小工具。

如果覺得內建啟用的管理員功能列很礙眼,也可以透過過濾器關掉它。

add_filter( 'show_admin_bar', '__return_false' );

還記得前面第六篇文章提到的過濾器的用法嗎?第一個參數是過濾器的名稱,第二個參數是函式。__return_false 是 WordPress 定義好的函式,它回傳的是布林值 false ,另外相對的 __return_true 是回傳布林值 true,也很常見於被使用在 functions.php 中,用來透過過濾器開啟或關閉內建功能。

區塊功能

自從區塊編輯器內建於 WordPress 之後,提供了可以針對區塊編輯器微調的特色支援。

功能名稱 說明
align-wide 允許區塊有更寬或全寬的排版選項,例如圖片、群組和封面區塊。
editor-color-palette 定義主題的顏色選擇,供編輯器中的顏色選擇器使用。
disable-custom-colors 禁止使用者在編輯器中選擇自訂顏色。
editor-gradient-presets 允許主題提供預設的漸層顏色選擇。
disable-custom-font-sizes 禁止用戶在編輯器中選擇自訂字體大小。
editor-font-sizes 定義主題的字體大小選擇,供編輯器中的字體大小選擇器使用。
editor-styles 讓主題可以提供一個後台編輯器的樣式,讓編輯器的外觀會更接近前台的呈現。
responsive-embeds 啟用響應式嵌入內容,如 YouTube 影片。
wp-block-styles 為核心區塊添加主題特定的樣式。
widgets-block-editor 啟用新的,基於區塊的小工具編輯器。
core-block-patterns 允許佈景主題和外掛提供預先設計的區塊組合,以便使用者可以輕鬆地添加到頁面或文章中。

區塊佈景主題 Twenty Twenty-Three 沒有 functions.php 檔案,而有想針對以上特色進行調整的時候,利用第五篇提到的子佈景主題來繼承它,自建一個 functions.php 進行設定就可以了。

更詳細的說明和使用範例程式碼,請參閱官方文件

可拔插函式

可拔插函式 (pluggable functions) 是在 WordPress 中很重要的概念,它的使用概念是為了提供讓外掛可以重新依需求設計一個自定義的函式或類別。

在核心檔案 pluggable.php 可以看到裡面都是像這樣的程式碼。先用 if 判斷式,看看函式是否已被定義,如果沒被定義,才定義預設的函式。


圖:wp-includes\pluggable.php 程式碼片段

上圖的例子是讓開發者可以在外掛內定義自己產生雜湊值的方式,而不採用 WordPress 定義的。

定義主題特色功能

問題來了,可拔插函式和佈景主題的特色功能定義有什麼關係?

當有使用者想要利用子佈景主題來繼承一個佈景主題,但它的功能特色功能定義都被註冊到鉤點裡,有些功能不想要,直接修改父主題的 functions.php 的行為又不恰當,這個客製化的方便性就打了折扣。

functions.php 程式碼片段
圖:functions.php 程式碼片段

PHP 程式的載入順序會先讀取子佈景主題,再來才是父主題,這樣的使用可拔插函式的作法來檢查是否子佈景主題已經定義了 ironman_setup 函式,沒有的話才載入父主題定義的 ironman_setup 函式。

add_action( 'after_setup_theme', 'ironman_setup' );

鉤點:after_setup_theme

這個鉤點在目前啟用的佈景主題的 functions.php 檔案被執行之後觸發。在這個時候,大多數的 WordPress 核心功能都已經被加載和設定,時間又在 functions.php 檔案剛載入後,非常適合主題設定和初始化的地方,因此你可以看到大部分的佈景主題都是把初始化的函式註冊在這個鉤點上。

總結

今天,我們深入探討了如何在 WordPress 佈景主題中編輯 functions.php 檔案,並利用可拔插函式的設計來建立定義特色功能的初始化函式,接著註冊到到 after_setup_theme 鉤點。

雖然佈景主題支援的特色眾多,但沒有必要一開始就將其全部加入。最佳實作步驟是隨著設計進度逐一加入特色的支援到佈景主題中,這樣才可以更深入地了解每一個特色如何在佈景主題中呈現。最後,結合自己的創意思考,進一步改善和提升佈景主題的功能和設計。


課後思考:

佈景主題的定義功能特色的初始化函式註冊到別的鉤點,例如 setup_theme 你覺得可行嗎?

前篇解答參考:

WordPress 以及它的佈景主題和外掛都是基於 GPL 許可證發佈的。根據 GPL 條款,使用者有權修改,因此使用者移除它並不違法。不過保留版權連結是對開發者的一種鼓勵,身為開發者,還是希望大家多多支持。


上一篇
Day 9 - 佈景主題設計實戰 (1) 主題命名及設計規劃
下一篇
Day 11 - 佈景主題設計實戰 (3) 預覽畫面、除錯
系列文
從 0 到 100:WordPress 開發者的實戰手冊30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言